<template>
  <div class="myDiv">
    <NewCard title="文件上传" :isScroll="true">
      <div class="myDiv_padd">
        <!-- 文件处理 -->
        <div class="upImg_content">
          <div class="upImg_content_top">
            <div class="upImg_content_top_item">
              <svg-icon
                icon-class="wk_up_check"
                class="step_box"
                v-if="type > 1"
              ></svg-icon>
              <div
                class="step_box flex flex_c"
                :class="type <= 1 ? 'bg_ac' : 'bg_dc'"
                v-else
              >
                1
              </div>
              <div
                class="text_ac flex flex_c"
                :class="type <= 1 ? 'bg_ac' : 'bg_dc'"
              >
                上传文件
              </div>
            </div>

            <div class="upImg_content_top_item">
              <div class="step_box flex flex_c opacity_n">隐藏内容</div>
              <div class="flex flex_c arrow_right">
                <svg-icon
                  :icon-class="
                    type == 1 ? 'xyb_ixon_nor_ac' : 'xyb_ixon_sel_off'
                  "
                ></svg-icon>
              </div>
            </div>
            <div class="upImg_content_top_item">
              <div
                class="step_box flex flex_c"
                :class="type == 2 ? 'bg_ac' : 'bg_dc'"
              >
                2
              </div>
              <div
                class="text_ac flex flex_c"
                :class="type == 2 ? 'bg_ac' : 'bg_dc'"
              >
                文档保存
              </div>
            </div>
          </div>

          <!-- 文件内容 -->
          <div class="upImg_content_center">
            <!-- 文件步骤 -->
            <div class="img_handle flex flex_c">
              <div v-if="type == 0" @click="seeLeft">
                <svg-icon
                  :icon-class="
                    beforeUpNum > 1 ? 'left_icon_arrow_ac' : 'left_icon_arrow'
                  "
                  class="img_handle_around"
                  v-if="type == 2"
                ></svg-icon>
              </div>
              <!-- 上传文件 -->
              <el-upload
                v-if="type == 0"
                :auto-upload="false"
                action="#"
                accept=".pdf, .word"
                multiple
                :on-change="uploadImg"
                :show-file-list="false"
                :limit='limit' 
                :on-exceed="exceed"
              >
                <div v-if="imgListData.length > 0">
                  <el-image
                    :src="imgListData[beforeUpNum - 1]"
                    alt=""
                    class="add_img"
                    fit="contain"
                  ></el-image>

                  <div>
                    {{ beforeUpNum }}/<span class="gray_c">{{
                      imgListData.length
                    }}</span>
                  </div>
                </div>
                <div class="add_img m_t_20" v-else>
                  <div class="add_img_icon">
                    <svg-icon
                      icon-class="add_img_icon"
                      class="img_icon"
                    ></svg-icon>
                  </div>
                  <div>添加文件</div>
                </div>
              </el-upload>
              <!-- 上传过度动画 -->
              <div class="up_loading flex" v-else-if="type == 1">
                <div>
                  <el-progress
                    type="circle"
                    color="#BBBAC2"
                    :width="150"
                    :percentage="upLoadPercen"
                  >
                  </el-progress>
                </div>
                <div>
                  <b
                    >文件导入中 ({{ imgListData.length }}/{{
                      imgListData.length
                    }})</b
                  >
                </div>
                <span>请不要退出或切换网页</span>
              </div>
              <!-- 文件确认 -->

              <div v-if="type == 0" @click="seeRight">
                <svg-icon
                  :icon-class="
                    beforeUpNum < imgListData.length
                      ? 'right_icon_arrow_ac'
                      : 'right_icon_arrow'
                  "
                  class="img_handle_around"
                  v-if="type == 2"
                ></svg-icon>
              </div>
            </div>
            <div class="flex flex_c m_t_30" v-if="type == 1">
              {{ beforeUpNum }}/<span class="gray_c">{{
                imgListData.length
              }}</span>
            </div>
            <!-- 保存文档 -->
            <div class="save_dc" v-else-if="type == 2">
              <div class="top flex flex_c">
                <div>
                  <svg-icon
                    :icon-class="
                      1 == 1 ? 'left_icon_arrow_ac' : 'left_icon_arrow'
                    "
                    class="img_handle_around"
                  ></svg-icon>
                </div>
                <div class="save_dc_list_box flex">
                  <div
                    class="save_dc_list"
                    v-for="item in fileListUrl"
                    :key="item.id"
                  >
                    <el-image :src="item" fit="fill"></el-image>
                  </div>
                </div>

                <div>
                  <svg-icon
                    :icon-class="
                      1 != 1 ? 'right_icon_arrow_ac' : 'right_icon_arrow'
                    "
                    class="img_handle_around"
                  ></svg-icon>
                </div>
              </div>
              <div class="flex flex_c m_a">共{{ fileListUrl.length }}张</div>
              <!-- 分割线 -->
              <el-divider></el-divider>

              <!-- 文档选择部分 -->
              <el-form :model="pageData" label-position="left">
                <el-form-item prop="name" label="文档名称" label-width="130px">
                  <el-input
                    v-model="pageData.name"
                    placeholder="建议填写合同相关方+核心词"
                    class="m_l"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  prop="contractType"
                  label="文档类别"
                  label-width="130px"
                >
                  <el-select
                    v-model="pageData.contractType"
                    class="m_l"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in contractTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  prop="property"
                  label="文档属性"
                  label-width="130px"
                >
                  <el-select
                    class="m_l"
                    v-model="pageData.property"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in propertyList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="生效日期"
                  label-width="130px"
                  prop="effectiveTime"
                  v-if="pageData.property < 3"
                >
                  <el-date-picker
                    v-model="pageData.effectiveTime"
                    type="date"
                    placeholder="生效日期"
                    format="yyyy年MM月dd日"
                    class="m_l"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="到期日期"
                  label-width="130px"
                  prop="expiredTime"
                  v-if="pageData.property == 2"
                >
                  <el-date-picker
                    v-model="pageData.expiredTime"
                    type="date"
                    placeholder="生效日期"
                    format="yyyy年MM月dd日"
                    class="m_l"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 底部菜单 -->
          <div class="myDiv_bottom flex" v-if="type > 1">
            <div class="flex flex_c right_dc" v-if="type != 2">
              <div
                class="myDiv_bottom_box flex flex_c right_ac"
                @click="addStep"
                v-if="type < 1"
              >
                确定
              </div>
            </div>
            <div
              v-else
              @click="goPayload"
              class="myDiv_bottom_box flex flex_c right_ac right_dc"
            >
              保存文档
            </div>
          </div>
        </div>
      </div>
    </NewCard>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";

import { changeBase64Fn, changeFileToURLFn } from "@/wss/utils/wss.js";
import {
  saveFile,
  getContractType,
  getFileToImgs,
} from "@/BMViews/api/intelligentControl/intelligentControl.js";
import { debounce } from "../../../../../wss/utils/wss";
let notPassArr = [undefined, "", null];
export default {
  components: {
    NewCard,
  },
  props: ["circle_id"],
  data() {
    return {
      pageData: {
        file: [],
        name: "",
        property: "", //文档属性
        contractType: "", //文档类别id
        effectiveTime: "", //生效时间
        expiredTime: "", //到期时间
        fileType: "pdf,word",
        fileboxId: "",
      },
      contractTypeList: [], //文档类别列表
      propertyList: [
        {
          name: "项目型",
          id: 1,
        },
        {
          name: "期间型",
          id: 2,
        },
        {
          name: "模板型",
          id: 3,
        },
      ], //文档属性列表
      type: 0, //判断当前步骤
      upLoadPercen: 0, //上传文件百分比
      imgListData: [], //上传文件list
      beforeUpNum: 0, //上传文件的下标
      fileListUrl: [], //文件回调的图片
      limit:1,//限制文件上传个数
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 添加文件
    uploadImg(item, fileList) {
      if (parseInt(item.raw.size / 1024 / 1024) > 50) {
        this.$message({
          message: "上传的文件过大",
          type: "error",
        });
        return;
      }
      this.imgListData.push(changeFileToURLFn(item.raw));
     
      this.pageData.file.push(item.raw);
      this.imgListData.length >= 1 && this.beforeUpNum == 0
        ? (this.beforeUpNum += 1)
        : "";
      this.type == 0 ? this.addStep() : "";
    },
    // 超出限制时钩子
    exceed(){
         this.$message({
          message:'暂不支持多文件上传',
          type:"warning"
         })
    },
    // 向左切换文件
    seeLeft() {
      this.beforeUpNum <= 1 ? "" : (this.beforeUpNum -= 1);
    },
    // 向右切换文件
    seeRight() {
      this.beforeUpNum >= this.imgListData.length
        ? ""
        : (this.beforeUpNum += 1);
    },
    // 文件替换
    changeImg(item) {
      this.imgListData.splice(
        this.beforeUpNum - 1,
        1,
        changeFileToURLFn(item.raw)
      );
      this.pageData.file.splice(this.beforeUpNum - 1, 1, item.raw);
    },
    // 删除文件
    deleteImg() {
      if (this.imgListData.length > 1) {
        this.imgListData.splice(this.beforeUpNum - 1, 1);
        this.pageData.file.splice(this.beforeUpNum - 1, 1);
      } else {
        this.$message({
          type: "warning",
          message: "至少保留一张",
          center: true,
        });
      }
    },
    // 下一步
    async addStep() {
      this.getFileToImgs();
      this.addUploadPercen(500);
      this.beforeUpNum = 1;
      this.type += 1;
    },
    // 上传中百分比计算
    addUploadPercen(deply) {
      const that = this;
      setTimeout(() => {
        that.upLoadPercen += 10;
        if (that.upLoadPercen != 70) {
          that.upLoadPercen < 100
            ? that.addUploadPercen(500)
            : setTimeout(() => {
                that.type += 1;
                that.type == 2 ? that.getContractType() : "";
              }, 500);
        }
      }, deply);
    },
    // 文件获取图片
    getFileToImgs: debounce(async function () {
      try {
        let form = new FormData();
        Object.keys(this.pageData).forEach((item) => {
          if (item == "file") {
            this.pageData[item].forEach((items) => {
              form.append(item, items);
            });
          } else {
            form.append(item, this.pageData[item]);
          }
        });

        const res = await getFileToImgs(form);
        if (res.code == 200) {
          this.fileListUrl = res.data.imgUrlList;
          this.upLoadPercen = 80;
          this.getContractType(100);
        }
      } catch (error) {
        this.$message({
          message: "上传失败",
          type: "error",
        });
        this.imgListData = []
        this.type = 0;
      }
    }, 300),
    // 格式化时间
    formatData(e) {
      return (
        e.getFullYear() +
        "-" +
        (e.getMonth() + 1) +
        "-" +
        e.getDate() +
        " " +
        "00:00:00"
      );
    },
    // 确认文档，
    async goPayload() {
      //判断当前输入内容
      if (
        !this.pageData.name ||
        !this.pageData.property ||
        !this.pageData.contractType
      ) {
        this.$message({
          message: "有选项未选择",
          type: "warning",
        });
        return;
      }

      if (this.pageData.property == 1 && !this.pageData.effectiveTime) {
        this.$message({
          message: "请选择生效时间",
          type: "warning",
        });
        return;
      }
      if (
        this.pageData.property == 2 &&
        (!this.pageData.effectiveTime || !this.pageData.expiredTime)
      ) {
        this.$message({
          message: "请选择完整的时间段",
          type: "warning",
        });
        return;
      }

      if (this.pageData.property == 3) {
        this.pageData.expiredTime = this.pageData.effectiveTime = "";
      } else if (this.pageData.property == 2) {
        this.pageData.effectiveTime = this.formatData(
          this.pageData.effectiveTime
        );
        this.pageData.expiredTime = this.formatData(this.pageData.expiredTime);
      } else {
        this.pageData.expiredTime = "";
        this.pageData.effectiveTime = this.formatData(
          this.pageData.effectiveTime
        );
      }
      this.pageData.fileboxId = this.circle_id;
      let form = new FormData();
      Object.keys(this.pageData).forEach((item) => {
        if (item == "file") {
          this.pageData[item].forEach((items) => {
            form.append(item, items);
          });
        } else {
          form.append(item, this.pageData[item]);
        }
      });
      const res = await saveFile(form);
      if (res.code == 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
         this.$emit('changeStatus',2)
        // this.type = 0;
        // this.imgListData = [];
      }
    },
    // 获取文档类别
    async getContractType() {
      try {
        const res = await getContractType({
          type: 1,
          status: 0,
        });

        if (res.code == 200) {
          this.contractTypeList = res.rows;
        }
      } catch (err) {
        throw error(err);
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
// 滚动效果测试
.flex {
  display: flex;
  align-items: center;
}
.flex_c {
  justify-content: center;
}
.flex_js {
  justify-content: space-between;
}
.opacity_n {
  opacity: 0;
}
.gray_c {
  color: #999999;
}
.m_r_10 {
  margin-right: 10px;
}
.m_l {
  width: 100%;
}
.m_t_20 {
  margin-top: 20px;
}
.m_t_30 {
  margin-top: 30px;
}
.myDiv {
  position: relative;
  height: 100%;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #ecedf0;
  .myDiv_padd {
    padding: 0 30px 80px;
  }
  .myDiv_header {
    display: flex;
    align-items: center;
    height: 66px;
    border-bottom: 1px solid #efefef;
    span {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      margin-left: 13px;
    }
  }
  .upImg_content {
    .upImg_content_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 130px;
      background-color: #f1f3ff;
      border-radius: 5px;
      margin-top: 15px;
      border: 1px solid #e5e6e9;
      padding: 0 100px;
      .upImg_content_top_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .arrow_right {
          width: 30px;
          height: 30px;
          margin-top: 15px;
        }
        .bg_ac {
          background-color: #39486f;
          color: #fff;
        }
        .bg_dc {
          color: #9c9da6;
          border: 2px solid #c8cce2;
        }
      }
      .step_box {
        width: 34px;
        height: 34px;
        border: 1px solid #c8cce2;
        border-radius: 50%;
        font-size: 16px;
        // text-align: center;
        // line-height: 17px;

        box-sizing: border-box;
      }

      .text_ac {
        margin-top: 15px;
        width: 100px;
        height: 30px;
        font-size: 14px;
        border-radius: 17px;
        background-color: #d3d8e5;
      }
    }
    // 文件处理
    .upImg_content_center {
      .img_handle {
        padding: 0 100px;
        justify-content: space-between;
        // 文件上传状态
        .up_loading {
          width: 100%;
          margin-top: 105px;

          flex-direction: column;
          div:nth-child(2) {
            margin: 52px 0 16px;
          }
          span {
            font-size: 12px;
            color: #bababa;
          }
        }
        .img_handle_around {
          width: 21px;
          height: 21px;
        }
        .add_img_icon {
          margin-bottom: 14px;
        }
        .add_img {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 300px;
          height: 500px;
          border: 1px dashed #ecedf0;
          font-size: 14px;
          color: #333333;

          .add_img_delete {
            position: absolute;
            top: -8px;
            left: -8px;
            i {
              font-size: 16px;
              color: #dedede;
            }
          }
        }
        .img_icon {
          width: 50px;
          height: 41px;
        }
      }
    }
    // 保存文档部分
    .save_dc {
      margin-top: 20px;
      padding: 0 20px;
      box-sizing: border-box;
      .top {
        .save_dc_list_box {
          flex: 1;
          margin: 0 20px;
          .save_dc_list {
            width: 100px;
            height: 151px;
            border-radius: 6px;
            border: 1px solid #ecedf0;
            margin-right: 10px;
          }
        }
      }
      .m_a {
        margin: 12px 0 19px;
      }
    }
  }
  .myDiv_bottom {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 80px;
    padding: 0 30px;
    border-top: 1px solid #ecedf0;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 14px;
    .myDiv_bottom_box {
      width: 110px;
      height: 40px;
      border-radius: 20px;
      border: 1px solid #cccccc;
    }
    .right_ac {
      background-color: #f87a23;
      color: #fff;
    }
    .right_dc {
      margin: 0 10px 0 auto;
    }
  }
}
</style>